<template>
    <div>
        <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="back" />
    </div>
    <!-- 背景 -->
    <div class="bg"></div>
    <div class="info">
        <van-tabs v-model:active="active">
            <van-tab title="全部">
                <van-swipe-cell v-for="(item, index) in order1">
                    <div style="display: flex;margin-top: 5px;">
                        <div style="margin-left: 10px;">{{ item.oid }}</div>
                        <div style="margin-left: 170px;">已完成
                            <van-icon @click="danshan1" name="delete-o" style="margin-left: 5px;" />
                        </div>
                    </div>
                    <div class="order">

                        <div class="img-box" @click="getProcq(item.pid, index)">
                            <img :src="item.smallImg" alt=""
                                style="width:105px ; border-radius: 10px; height: 90px;margin-left: 5px;" />
                        </div>
                        <div style="flex: 2; overflow-y: auto;padding-top: 10px;padding-left: 12px;">
                            <div style="font-size: 16px;">{{ item.name }}</div>
                            <div style="padding-top: 3px;">{{ item.enname }}</div>
                            <!-- <div style="padding-top: 15px;">{{ item.rule }}</div> -->
                        </div>
                        <div>
                            <div
                                style="padding-top: 25px; text-align: center;font-size: 16px;padding-right: 20px;color: #4055bd;">
                                ￥{{ item.price }}</div>
                            <div style="margin-top: 20px;margin-left: 40px;">
                                X{{ item.count }}</div>
                        </div>
                    </div>
                </van-swipe-cell>
            </van-tab>
            <van-tab title="进行中">
                <van-swipe-cell v-for="(item, index) in order2">
                    <div style="display: flex;margin-top: 5px;">
                        <div style="margin-left: 10px;">{{ item.oid }}</div>
                        <div style="margin-left: 170px;">确认收货
                           
                        </div>
                    </div>
                    <div class="order">

                        <div class="img-box" @click="getProcq(item.pid, index)">
                            <img :src="item.smallImg" alt=""
                                style="width:105px ; border-radius: 10px; height: 90px;margin-left: 5px;" />
                        </div>
                        <div style="flex: 2; overflow-y: auto;padding-top: 10px;padding-left: 12px;">
                            <div style="font-size: 16px;">{{ item.name }}</div>
                            <div style="padding-top: 3px;">{{ item.enname }}</div>
                            <!-- <div style="padding-top: 15px;">{{ item.rule }}</div> -->
                        </div>
                        <div>
                            <div
                                style="padding-top: 25px; text-align: center;font-size: 16px;padding-right: 20px;color: #4055bd;">
                                ￥{{ item.price }}</div>
                            <div style="margin-top: 20px;margin-left: 40px;">
                                X{{ item.count }}</div>
                        </div>
                    </div>
                </van-swipe-cell>
            </van-tab>
            <van-tab title="已完成">内容 3</van-tab>
        </van-tabs>

    </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { get, post } from "../request";
import { ref } from "vue";
export default {
    setup() {

        const order2 = ref([])
        const receive = async (oid) => {
        const res = await post('/receive', {
                tokenString: JSON.parse(localStorage.getItem('tokens')),
                oid,
            })
            order2.value = res.data.result
            console.log("确认收货", res);
        }
        receive()

        //删除方法
        const del = async (oid) => {
            const res = await post('/removeOrder', {
                tokenString: JSON.parse(localStorage.getItem('tokens')),
                oid,
            })
            console.log("删除", res);
            if (res.data.code == 7000) {
                order1()
            }
        }
        const danshan1 = (e) => {
            // 页面删除 / 数据删除
            console.log(e);
            order1.value.splice(e, 1)
            del(JSON.stringify([e]))
            console.log("删除1", order1.value);

        }

        const active = ref(0);

        const order1 = ref([])
        const findOrder = async () => {
            const res = await get("/findOrder", {
                params: {
                    status: '0',
                    tokenString: JSON.parse(localStorage.getItem('tokens'))
                }
            })
            order1.value = res.data.result
            console.log("订单信息", res);
        }
        findOrder()

        //点击进入商品详情页
        const getProcq = (e) => {
            //console.log("e", e);
            router.push({ name: "Detail", query: { id: e } })
        }


        const router = useRouter();
        const back = () => {
            router.go(-1);
        }

        return {
            back,
            findOrder,
            active,
            order1,
            danshan1,
            getProcq,
            receive,
            order2
        }
    },

}
</script>
<style lang="less" scoped>
.order {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
}

.info {
    border-radius: 5px;
    position: relative;
    top: -30px;
    left: 0;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, );
}

.bg {
    height: 100px;
    background-color: #ff8c8c;
}
</style>